import React, { useEffect } from 'react';
import { Modal, Form, Input } from 'antd';

const UserModal = (props) => {

    const [form] = Form.useForm();

    useEffect(() => {
        if (props.record) {
            form.setFieldsValue(props.record);
        } else {
            form.resetFields()
        }
    }, [props.visible])

    const onOk = () => {
        form.submit()
    }

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    return (
        <>
            <Modal title="Basic Modal" visible={props.visible} onOk={onOk} onCancel={props.cancel} forceRender>
                <Form
                    name="basic"
                    form={form}
                    onFinish={props.onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="Name"
                        name="name"
                        rules={[{ required: true, message: 'Please input your username!' }]}

                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Email"
                        name="email"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="CreateTime"
                        name="create_time"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Status"
                        name="status"
                    >
                        <Input />
                    </Form.Item>
                </Form>

            </Modal>
        </>
    );
};

export default UserModal;